// const scrollElements = document.querySelectorAll('.js-scroll')
// scrollElements.forEach((el) => {
// 	el.style.opacity = 0
// })
// const elementInView = (el, percentageScroll = 100) => {
// 	const elementTop = el.getBoundingClientRect().top

// 	return (
// 		elementTop <=
// 		(window.innerHeight || document.documentElement.clientHeight) *
// 		(percentageScroll / 100)
// 	)
// }
// const displayScrollElement = (element) => {
// 	element.classList.add('scrolled')
// }
// const handleScrollAnimation = () => {
// 	scrollElements.forEach((el) => {
// 		if (elementInView(el, 100)) {
// 			displayScrollElement(el)
// 		} else {
// 			hideScrollElement(el);
// 		}
// 	})
// }
// const hideScrollElement = (element) => {
// 	element.classList.remove("scrolled");
// };

// let throttleTimer = false

// const throttle = (callback, time) => {
//   if (throttleTimer) return

//   // 这里标记一下，以使函数不会重复执行
//   throttleTimer = true

//   setTimeout(() => {
//     // 到了指定的时间，调用传入的回调函数
//     callback()
//     throttleTimer = false
//   }, time)
// }

// window.addEventListener('scroll', () => {
//   throttle(handleScrollAnimation, 250)
// })


gsap.registerPlugin(ScrollTrigger)
// 要对哪一个元素做动画
gsap.from(".s1", {
	scrollTrigger: {
		// // 滚动由哪个元素触发
		trigger: ".s1",
	},
	scale: 0.5,
	opacity: 0,
	duration: 3,
})
gsap.from(".s2", {
	scrollTrigger: {
		// // 滚动由哪个元素触发
		trigger: ".s2",
	},
	scale: 0.5,
	opacity: 0,
	duration: 2,
})
gsap.from(".s3", {
	scrollTrigger: {
		// // 滚动由哪个元素触发
		trigger: ".sale",
	},
	scale: 0.5,
	opacity: 0,
	duration: 1,
})
gsap.from(".des-left", {
	scrollTrigger: {
		// // 滚动由哪个元素触发
		trigger: ".des-right",
	},
	y: 100,
	opacity: 0,
	duration: 2,
	onComplete: showMessage,
})
gsap.from(".des-right", {
	scrollTrigger: {
		// // 滚动由哪个元素触发
		trigger: ".des-right",
	},
	y: 100,
	opacity: 0,
	duration: 2,
})
gsap.from(".pic", {
	scrollTrigger: {
		// // 滚动由哪个元素触发
		trigger: ".pic",
	},
	y: 100,
	opacity: 0,
	duration: 2,
})

function showMessage() {
	$('.des-left').css('display', 'none');
	$('.des-left-cope').css('display', 'block');
	gsap.from(".des-left-cope", {
		scrollTrigger: {
			// // 滚动由哪个元素触发
			trigger: ".des-left-cope",
		},
		y: 100,
		opacity: 0,
		duration: 2,
	})
}
gsap.utils.toArray('.sticky-box').forEach(section => {
	ScrollTrigger.create({
		trigger: section,
		start: 'top top',
		pin: true,
		pinSpacing: false
	})
});
